import React from 'react';
import {Checkbox} from 'antd';
import {WeaFormItem, WeaInput} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

// 显示字段
class EField extends React.Component {
    state = {
        eField: this.props.value
    };

    render() {
        const {eField} = this.state;

        let eFieldList = [];
        for (let key in eField) {
            if (eField.hasOwnProperty(key)) {
                eFieldList.push(
                    <li style={{display: 'inline-block'}}>
                        <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@z1rtc6@${key}`}
                            checked={eField[key].checked}
                            onChange={
                                e => {
                                    this.setState({
                                        eField: {
                                            ...eField, [key]: {...eField[key], checked: e.target.checked}
                                        }
                                    })
                                }
                            }
                        >
                            {eField[key].label}
                        </Checkbox>
                        {
                            this.props.eShareLevel == '2' && eField[key].type == 'image' ?
                                <span>
                                    <span>{getLabel(386529, '宽度：')}</span>
                                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@kd6q9p@${key}`}
                                        value={eField[key].width}
                                        style={{width: '40px', marginRight: '8px'}}
                                        onChange={value => this.setState({eField: {...eField, [key]: {...eField[key], width: value}}})}
                                    />
                                {
                                    !eField[key].autoHeight ?
                                    <span>
                                        <span>{getLabel(386530, '高度：')}</span>
                                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@rby9te@${key}`}
                                            value={eField[key].height}
                                            style={{width: '40px', marginRight: '8px'}}
                                            onChange={value => this.setState({eField: {...eField, [key]: {...eField[key], height: value}}})}
                                        />
                                    </span>
                                    : ''
                                }
                                <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@ih01w4@${key}`}
                                    checked={eField[key].autoHeight}
                                    onChange={e => this.setState({eField: {...eField, [key]: {...eField[key], autoHeight: e.target.checked}}})}
                                >{getLabel(22494, '自适应高度')}</Checkbox>
                            </span> : ''
                        }
                    </li>
                );
            }
        }

        return (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@83iwfm`} label={getLabel(19495, '显示字段')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <ul style={{lineHeight: '29px'}}>{eFieldList}</ul>
            </WeaFormItem>
        );
    }

    getSaveValues() {
        return this.state.eField;
    }
}

export default EField;
